Ext.define('CDR.view.manager.pbx.PBXProfileView', {
	extend: 'Ext.container.Container',
	alias: 'widget.profileline',
	anchor: '100%',
	layout:'column',
	targetObject: null,
	targetPbx: null,
	initComponent: function() {
		var me = this;
		me.callParent();
		this.idfield = Ext.createWidget('hidden',{
			name: 'id'
		});
		this.sequence = Ext.createWidget('hidden',{
			name: 'sequence'
		});
		this.name = Ext.createWidget('textfield',{
			fieldLabel: 'Name',
			allowBlank: false,
			anchor:'96%',
			labelWidth: 45,
			name: 'name'
		});
		this.description = Ext.createWidget('textfield',{
			fieldLabel: 'Description',
			anchor:'96%',
			name:'description'
		});
		this.bytes = Ext.createWidget('numberfield',{
			fieldLabel: 'Bytes',
			allowBlank: false,
			anchor:'96%',
			labelWidth: 45,
			value: 1,
			maxValue: 99,
			minValue: 1,
			name:'numOfbyte'
		});
		this.remove = Ext.createWidget('button',{
			width:22,
			iconCls:'icon-delete',
			handler: function(){
				Ext.Ajax.request({
					scope: this,
					method: 'POST',
					url:'delete-profile?profileId=' + this.idfield.getValue(),
					success: function(){
						this.targetObject.remove(this, true);
						Ext.each(this.targetObject.items.items, function(it){
							if(typeof it.name == 'object'){
								it.sequence.setValue(this.targetObject.items.indexOf(it));
							}
						}, this);
						this.targetObject.currentSequence --;
					}
				});
			}, 
			scope: this
		});
		this.up = Ext.createWidget('button',{
			width:22,
			iconCls:'icon-up',
			handler: function(){
				var fromIndex = this.targetObject.items.indexOf(this);				
				if(fromIndex > 0){
					this.targetObject.move(fromIndex, fromIndex - 1);	
				}
				Ext.each(this.targetObject.items.items, function(it){
					if(typeof it.name == 'object'){
						it.sequence.setValue(this.targetObject.items.indexOf(it));
					}
				}, this);
			},
			scope: this
		});
		this.down = Ext.createWidget('button',{
			width:22,
			iconCls:'icon-down',
			handler: function(){
				var fromIndex = this.targetObject.items.indexOf(this);				
				if(fromIndex < this.targetObject.items.length - 1){
					this.targetObject.move(fromIndex, fromIndex + 1);	
				}
				Ext.each(this.targetObject.items.items, function(it){
					if(typeof it.name == 'object'){
						it.sequence.setValue(this.targetObject.items.indexOf(it));
					}
				}, this);
				
			},
			scope: this
		});
		
		this.add(this.idfield, this.sequence,
			Ext.create('Ext.container.Container', {
				columnWidth:.25,
				layout: 'anchor',
				items:[this.name]
			}),
			Ext.create('Ext.container.Container', {
				columnWidth:.52,
				layout: 'anchor',
				items:[this.description]
			}),
			Ext.create('Ext.container.Container', {
				columnWidth:.15,
				layout: 'anchor',
				items:[this.bytes]
			}),
			Ext.create('Ext.container.Container', {
				columnWidth:.08,
				layout: 'hbox',
				items:[this.up, this.down, this.remove]
			})
		);
		// init value
		var config = this.initialConfig;
		if(config.data){
			var item = config.data;
			this.idfield.setValue(item.get('id'));
			this.name.setValue(item.get('name'));
			this.description.setValue(item.get('description'));
			this.bytes.setValue(item.get('description'));
			this.sequence.setValue(item.get('description'));
		}
	}
});

Ext.define('CDR.widget.Profile', {
	extend: 'Ext.form.Panel',
	region:'center',
	alias:'widget.profile',
	title:'Profile',
	buttonAlign:'center',
	autoScroll:true,
	currentSequence: 1,
	bodyStyle:'padding:5px 5px 0',
	fieldDefaults: {
		msgTarget: 'side',
		labelWidth: 65
	},
	initComponent: function(){
	   var me = this;
       me.callParent();
    },
	buttons:[{
		text: 'Add New',
		iconCls: 'icon-add',
		handler: function() {
			var me = this.up('form');
			me.add(Ext.createWidget('profileline', {targetObject: me, sequence: me.currentSequence ++}));
		}
	}, {
		text: 'Save All',
		iconCls: 'icon-save',
		formBind: true,
		handler: function() {
			var form = this.up('form').getForm();
			if (form.isValid()) {
				
				console.log(form.getValues());
				form.submit({
					success: function(form, action) {
					   Ext.Msg.alert('Success', action.result.msg);
					},
					failure: function(form, action) {
						Ext.Msg.alert('Failed', action.result.msg);
					}
				});
			}
		}
	}],
	reloadData: function(records, sn) {
		this.targetPbx = sn;
		this.removeAll(true);
		//set pbx id for hidden field
		this.add({
			xtype: 'hidden',
			name: 'pbxId',
			value: sn.data.obId
		});
		this.currentSequence = 1;
		var me = this;
		if(records.length > 0) {
			Ext.each(records, function(item){
				this.add(Ext.createWidget('profileline', {data: item}));
				this.currentSequence ++;
			}, me);
		} else {
			//add empty profile
			me.add(Ext.createWidget('profileline',{sequence: me.currentSequence ++}));
		}
	}
});
